body.caerp .modal_view {
	&.appear div[role="dialog"]>div {
		animation: appear_anim .25s ease-out;
	}

	&.dismiss div[role="dialog"]>div {
		animation: dismiss_anim .25s ease-out;
	}

	.loading_box,
	.feedback_box {
		position: absolute;

		svg {
			height: 33%;
			max-height: 8rem;
			max-width: 8rem;
			width: 33%;
		}
	}

	div[role="dialog"] {
		align-items: center;
		background: var(--mask-layer-background-color);
		bottom: 0;
		display: flex;
		justify-content: center;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: $maskLayer;

		.modal_layout {
			background: var(--screen-background-color);
			box-shadow: 0 2px 4px var(--box-shadow-color);
			display: flex;
			flex-direction: column;
			max-height: calc(100vh - 20px);
			max-width: calc(100vw - 20px);
			overflow: hidden;
			padding: 0;
			position: relative;

			header {
				padding: var(--padding-m);
			}

			footer {
				border-top: 1px dashed var(--border-trans-color);
				padding: var(--padding-m) 0 0;

				button,
				a.btn {
					margin: 0 var(--padding-s) var(--padding-s) 0;
				}
			}

			transition: all 0.1s !important;
			/* for modal resizing */


			blockquote footer {
				border-top: unset;
			}
		}

		header,
		footer,
		nav {
			flex: 0 0 auto;
		}

		nav {
			margin-bottom: -1px;

			.nav-tabs {
				padding: 0 var(--padding-m);
			}

			&+.tab-content {
				border-top: 1px solid var(--border-color);
			}
		}

		.modal_content_layout {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			overflow: hidden;
			padding: 0 var(--padding-m);

			.modal_content {
				flex: 1 1 auto;
				margin-right: -var(--padding-m);
				overflow-y: auto;
				padding-right: var(--padding-m);
				padding-top: var(--padding-m);

				&.with_table {
					padding-top: 0;
				}

				>.form-group:first-child {
					padding-top: var(--padding-m);
				}
			}

			form.deform {
				display: flex;
				flex: 1 1 auto;
				margin-right: -var(--padding-m);
				overflow-y: hidden;
			}

			fieldset.deformFormFieldset {
				display: flex;
				flex-direction: column;
				margin-right: -var(--padding-m);
				overflow: hidden;
				width: 100%;

				>div {
					flex: 1 1 auto;
					padding-right: var(--padding-m);

					&.form-group:first-of-type {
						padding-top: var(--padding-m);
					}

					&:last-of-type {
						flex: 0 0 auto;
						padding: var(--padding-m) 0;

						button {
							margin-bottom: 0;
						}
					}

					&:first-of-type:not(.row) {
						overflow-y: auto;
					}
				}

				>div.alert:first-of-type {
					flex-shrink: 0;
					margin-right: var(--padding-m);
					padding-bottom: var(--padding-m);
					padding-top: var(--padding-m);
					overflow-y: hidden;

					+div {
						overflow-y: auto;
					}
				}

				.form-group.Sequence .deform-seq-item.form-group {
					padding: var(--padding-m) 0;
				}
			}

			thead {
				top: -(var(--padding-m));
				tr:first-child th[scope="col"] {
					height: auto;
				}
			}
		}

		form.modal_content_layout .modal_content {
			padding-top: 0;
		}

		header {
			background: var(--theme-color);
			position: sticky;
			top: 0;
			z-index: $stickyContentLayer;

			&.caution {
				background: var(--func-caution-color);
			}

			button.close {
				svg {
					fill: var(--theme-text-color);
				}

				&:hover,
				&:focus,
				&:active {
					background: none;

					svg {
						fill: var(--form-icon-button-hover-color);
					}
				}
			}

			h2 {
				align-items: center;
				border: 0 none;
				display: flex;
				color: var(--theme-text-color);
				padding: 0 2rem 0 0;

				.user_avatar {
					flex-basis: 2.5rem;
					height: 2.5rem;
					margin: (-var(--padding-m)) var(--padding-m) (-var(--padding-m)) 0;
					width: 2.5rem;
				}

				.bubble {
					margin-left: .25em;
				}
			}

			+form:not(.modal_content_layout) {
				display: flex;
				flex: 1 1 auto;
				overflow-y: hidden;
			}
		}

		button.close {
			position: absolute;
			right: 0;
			top: 0;
			z-index: $actionLayer;
		}

		footer {
			padding-top: var(--padding-m);
		}

		.modal_overflow {
			display: flex;
			flex: 1 1 auto;
			overflow-y: hidden;
			width: 100%;
		}

		.tab-content {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			overflow: hidden;
			padding: 0 var(--padding-m);

			.tab-pane.active {
				display: flex;
				flex: 1 1 auto;
			}

			form.modal_content_layout {
				padding-top: 0;
			}
		}

		.tab-pane {
			max-height: 100%;
			overflow: hidden;

			.modal_content_layout {
				max-height: 100%;
				padding-bottom: 0;
				width: 100%;
			}
		}

		.form-row {
			>div:not([class*="col-md"]) {
				width: 100%;
			}

			.form-group:not([class*="col-md"]) {
				padding-bottom: var(--padding-m);
				width: 100%;
			}

			>div[class*="col-md"] {
				.form-group:not([class*="col-md"]) {
					padding-bottom: 0;
				}
			}
		}

		.sub_modal {
			border-top: 1px dashed var(--border-trans-color);
			position: relative;
			padding-top: var(--padding-s);
		}
	}

	&.size_full {
		div[role="dialog"] .modal_layout {
			min-height: 95vh;
			height: 95vh;
			width: 95%;
		}
	}

	&.size_extralarge {
		div[role="dialog"] .modal_layout {
			min-height: 75vh;
			height: 75vh;
			width: 95%;
		}
	}

	&.size_large {
		div[role="dialog"] .modal_layout {
			min-height: 75vh;
			width: 60em;
		}
	}

	&.size_middle {
		div[role="dialog"] .modal_layout {
			min-height: 50vh;
			width: 45em;
		}
	}

	&.size_small {
		div[role="dialog"] .modal_layout {
			min-height: 25vh;
			width: 30em;
		}
	}
}

body.caerp.modal_open {
	overflow-y: hidden;
	position: relative;

	.base_layout,
	.base_content,
	.main_area {
		height: 100vh;
		overflow: hidden;
	}
}

@media (min-width: $wideWidth ) {
	body.caerp .modal_view:not([class*="size"]) {
		div[role="dialog"] .modal_layout {
			max-width: 50vw;
		}
	}
}

@media (max-width: $wideWidth ) {
	body.caerp .modal_view:not([class*="size"]) {
		div[role="dialog"] .modal_layout {
			max-width: 75vw;
		}
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp .modal_view:not([class*="size"]) {
		div[role="dialog"] .modal_layout {
			max-width: 90vw;
		}
	}
}

@media (min-width: $mobileWidth ) and (max-width: $tabletWidth ) {
	body.caerp .modal_view {
		div[role="dialog"] {
			.modal_layout {
				margin: 2.5vh 0;
				max-height: calc( 95vh - 20px );
			}
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .modal_view {
		div[role="dialog"] {
			align-items: flex-start;

			.modal_layout {
				height: 100vh;
				min-height: 100vh !important;
				max-height: 100vh;
				width: 100vw !important;
				max-width: 100vw;

				main {
					overflow-y: scroll;
				}
			}

			.modal_content_layout {
				fieldset.deformFormFieldset {
					>div {
						padding-right: 0;
					}
				}
			}
		}

		.modal_actions {
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: -var(--padding-m);

			button {
				margin-bottom: var(--padding-m);
			}
		}
	}
}